<template>
  <div style="display: flex">
    <div
      style="
        width: 350px;
        height: calc(100vh- 40px);
        border-right: 1px solid #ccc;
        padding: 20px;
      "
    >
      <el-tree
        :data="MenuTree"
        @node-click="handleNodeClick"
        :render-content="renderContent"
      >
        ></el-tree
      >
    </div>
    <div style="width: calc(100vw - 390px); height: calc(100vh)">
      <MenuItemPage
        :menu="menu"
        :type="type"
        :initMenuTreeFn="initMenuTree"
      ></MenuItemPage>
    </div>
  </div>
</template>

<script>
import { GetMenuTree, DeleteMenu, GetMenu } from "../api/Menu";

import { Tree, Button, Popconfirm } from "element-ui";
import MenuItemPage from "../pages/MenuItemPage.vue";
export default {
  data() {
    return {
      MenuTree: [],
      menu: {},
      type: "view",
    };
  },
  components: {
    [Tree.name]: Tree,
    [Button.name]: Button,
    [Popconfirm.name]: Popconfirm,
    MenuItemPage,
  },
  methods: {
    renderContent(h, { node, data }) {
      return (
        <span class="custom-tree-node">
          <span class="node-lable">{node.label}</span>
          <span>
            <Button
              size="mini"
              type="primary"
              plain
              icon="el-icon-edit-outline"
              circle
              on-click={() => this.edit(node, data)}
            ></Button>
            <Button
              size="mini"
              type="primary"
              plain
              icon="el-icon-plus"
              circle
              title="添加子节点"
              on-click={() => this.add(node, data)}
            ></Button>
            <Popconfirm
              confirm-button-text="确认"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              class="menu-popconfirm"
              title="确认要删除该条记录？"
              on-confirm={() => this.remove(node, data)}
            >
              <Button
                size="mini"
                type="danger"
                plain
                slot="reference"
                icon="el-icon-delete"
                circle
              ></Button>
            </Popconfirm>
          </span>
        </span>
      );
    },
    edit(data) {
      console.log("edit", data);
      var _this = this;
      this.type = "edit";
      GetMenu(data.data.id).then((result) => {
        console.log(result);
        _this.menu = result.data;
      });
    },
    handleNodeClick() {},
    add(data) {
      this.type = "add";
      this.menu = {};
      this.menu.parentId = data.data.id;
    },
    remove(data) {
      DeleteMenu(data.data).then((result) => {
        console.log(result);
        this.initMenuTree();
      });
    },
    initMenuTree() {
      var _this = this;

      GetMenuTree().then((result) => {
        var MenuArr = result.data;
        addLabelToTree(MenuArr);
        _this.MenuTree = MenuArr;
      });
    },
  },
  created() {
    this.initMenuTree();
  },
};

function addLabelToTree(tree) {
  tree.forEach((node) => {
    // 为当前节点添加label字段
    node.label = node.name;
    // 如果当前节点有子节点，递归调用函数
    if (node.children && node.children.length > 0) {
      addLabelToTree(node.children);
    }
  });
}
</script>

<style>
.el-tree-node__content {
  height: 3rem !important;
}
.custom-tree-node > .node-lable {
  margin-right: 10px;
}
.menu-popconfirm {
  margin-left: 10px;
}
</style>
